<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪轮播</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			/* button{
				width: 20px;
				height: 20px;
				text-align: center;
				cursor:pointer;
			}
			#Content{
				width: 200px;
				height: 200px;
				border: 1px solid;
				cursor: pointer;
				position: relative;
			}
			span{
				cursor: pointer;
				position: absolute;
				top: 85px;
				display: none;
				display: inline-block;
				width: 15px;
				height:20px;
			}
			#Content span:nth-child(2){
				left: 0px;
			}
			#Content span:nth-child(3){
				left: 185px;
			} */
			input{
				width: 20px;
				height: 20px;
				cursor: pointer;
			}
			.active{
				background:red;
			}
			#box{
				width:200px;
				height:200px;
				border:1px solid black;
				position:relative;
				cursor: pointer;
			}
			#left{
				position:absolute;
				top:45%;
				left:0;
				cursor: pointer;
				display: none;
			}
			#right{
				position:absolute;
				top:45%;
				right:0;
				cursor: pointer;
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- <button>1</button>
		<button>2</button>
		<button>3</button>
		<div id="Content">
			<p>11111</p>
			<span>←</span>
			<span>→</span>
		</div> -->
		<input type ="button" value="1" id="btn1" class="active"/>
		<input type ="button" value="2" id="btn2"/>
		<input type ="button" value="3" id="btn3"/>
		<div id="box">
			<span id="mySpan">1111111</span>
			<div id="left">←</div>
			<div id="right">→</div>
		</div>
	</body>
	<script>
		// 获取元素
			var input1 = document.getElementById("btn1");
			var input2 = document.getElementById("btn2");
			var input3 = document.getElementById("btn3");
			var Box = document.getElementById("box");
			var span = document.getElementById("mySpan");
			var left = document.getElementById("left");
			var right = document.getElementById("right");

		// 创建一个标志位变量
			var tange = 0;

		// 功能：鼠标移入大盒子，左右箭头显示
			Box.onmouseenter = function(){
				left.style.display = "block";
				right.style.display = "block";
			}
			Box.onmouseleave = function(){
				left.style.display = "none";
				right.style.display = "none";
			}

		// 功能：第一个按钮的点击事件
			input1.onclick = function(){
				//标志位为1
				tange = 1;
				//将标志位参数传给函数中
				apnde(tange);
			}
		// 功能：第二个按钮的点击事件
			input2.onclick = function(){
				//标志位为2
				tange = 2;
				//将标志位参数传给函数中
				apnde(tange);
			}
		// 功能：第二个按钮的点击事件
			input3.onclick = function(){
				//标志位为3
				tange = 3;
				//将标志位参数传给函数中
				apnde(tange);
			}

		// 功能：左箭头的点击事件
			left.onclick = function(){
				tange--;
				if(tange<1){
					tange =3;
				}
				apnde(tange);
			}
		// 功能：右箭头的点击事件
			right.onclick = function(){
				tange++;
				if(tange>3){
					tange=1;
				}
				apnde(tange);
			}

			function apnde(tange){
				switch(tange){
					case 1:
					{
						input1.className = "active";
						input2.className = "";
						input3.className = "";
						span.innerHTML = "1111111";
					}
					break;
					case 2:
					{
						input1.className = "";
						input2.className = "active";
						input3.className = "";
						span.innerHTML = "2222222";
					}
					break;
					case 3:
					{
						input1.className = "";
						input2.className = "";
						input3.className = "active";
						span.innerHTML = "3333333";
					}
					break;
					default:
						break;
				}
			}



//草稿：
		// var btn = document.getElementsByTagName("button");
		// var Content = document.getElementById("Content");
		// var span = document.getElementsByTagName("span");
		// var p = document.getElementsByTagName("p")[0];

		// //两个箭头的显示和隐藏
		// Content.onmouseenter = function(){
		// 	for(var i=0; i<span.length;i++){
		// 		span[i].style.display = "block";
		// 	}
		// }
		// Content.onmouseleave = function(){
		// 	for(var i=0; i<span.length;i++){
		// 		span[i].style.display = "none";
		// 	}
		// }
		
		// // 将第0个按钮给赋予cc这个变量
		// var cc = btn[0];

		// //按钮点击当前高亮
		// for(var i=0;i<btn.length; i++){
		// 	// 默认第一个元素是高亮的
		// 	cc.style.background = "red";
		// 	// 给每一个按钮添加点击事件
		// 	btn[i].onclick = function(){
		// 		// 去除上一次元素的背景色
		// 		cc.style.background = "";
		// 		// 当前元素的背景色发生变化
		// 		this.style.background = "red";
		// 		// 将当前元素给予cc这个变量
		// 		cc = this;
		// 		if(this.innerHTML == 1){
		// 			p.innerHTML = "1111111";
		// 		}else if(this.innerHTML == 2){
		// 			p.innerHTML = "2222222";
		// 		}else{
		// 			p.innerHTML = "3333333";
		// 		}
		// 	}
		// }

		// // 创建一个计数器
		// var tame = 0;

		// // 左右箭头点击，按钮高亮替换
		// for(var j=0; j<span.length; j++){
		// 	// 左箭头
		// 	span[0].onclick = function(){
		// 		tame--;
		// 		if(tame < 0){
		// 			tame =3;
		// 		}
		// 		// cc = btn[tame];
		// 		console.log(tame);
		// 	}
		// 	// 右箭头
		// 	span[1].onclick = function(){
		// 		tame++;
		// 		if(tame > 3){
		// 			tame =0;
		// 		}
		// 		// cc = btn[tame];

		// 		console.log(tame);
		// 	}
		// }
		
	
	</script>
</html>
